<template>
  <div>
    <div class="product-content">
      <div class="common-form">基本信息</div>
      <el-row>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">商品名称：</span>
            {{ detail.details.c_goods_name }}
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">商品描述：</span>
            {{ detail.details.c_goods_description }}
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">不发货地区：</span>
            {{ detail.details.c_no_delivery_area }}
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">商品原价(吊牌)：</span>
            {{ detail.details.c_original_price }}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">商品主图：</span>
            <el-image style="width: 100px; height: 100px" :src="detail.details.c_goods_image"
              :preview-src-list="[detail.details.c_goods_image]">
            </el-image>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">建议零售价：</span>
            {{ detail.details.c_sale_price }}
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">铺货价：</span>
            {{ detail.price }}
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">建议分类：</span>
            {{ detail.details.c_class_desc }}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">库存：</span>
            {{ detail.details.c_goods_stock_valid }}
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">商品市场价：</span>
            {{ detail.details.c_original_price }}
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pb16">
            <span class="gray9">建议零售价：</span>
            {{ detail.details.c_sale_price }}
          </div>
        </el-col>
      </el-row>
      <div class="common-form">规格信息</div>
      <el-table :data="detail.details.goods_sku" style="width: 100%">
        <el-table-column prop="c_goods_color" label="主图">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.c_goods_image"
              :preview-src-list="[scope.row.c_goods_image]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="c_buy_min_num" label="最小购买数量" width="180">
        </el-table-column>
        <el-table-column prop="c_buy_max_num" label="最大购买数量" width="180">
        </el-table-column>
        <el-table-column prop="c_goods_color" label="颜色">
        </el-table-column>
        <el-table-column prop="c_goods_name" label="商品名称">
        </el-table-column>
        <el-table-column prop="c_goods_size" label="商品尺码">
        </el-table-column>
        <el-table-column prop="c_goods_stock_valid" label="商品库存">
        </el-table-column>
        <!-- <el-table-column prop="c_in_price" label="商品进价">
        </el-table-column> -->
        <el-table-column prop="c_original_price" label="商品市场价">
        </el-table-column>
        <el-table-column prop="c_sale_price" label="建议零售价">
        </el-table-column>
      </el-table>
    </div>
    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="cancelFunc">返回上一页</el-button>
    </div>
  </div>
</template>

<script>
import PorductApi from '@/api/product.js';
export default {
  data() {
    return {
      loading: true,
      detail: {},
    };
  },
  created() {
    this.getParams();
  },
  methods: {
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    },
    /*获取参数*/
    getParams() {
      let self = this;
      const params = this.$route.query.id;
      PorductApi.yun_product_info({ id: params }, true).then(data => {
        self.loading = false;
        self.detail = data.data;
      }).catch(error => {
        self.loading = false;
      });
    },

  }
};
</script>
<style></style>
